<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@include file="menu.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
	$(function() {
		
		var height = $(window).height() - 66;
		var width = $(window).width();
		
		$("fieldset").css("height", height);
		
		$("#divTabelaClientes").load("ajax/atualizaTabelaCliente.jsp");
				
		$("#btnNovoCliente").button().click(function(){
			$.ajax({
				url:"cadastrarCliente.jsp",
				beforeSend : function() {
					document.documentElement.style.cursor = 'progress';
					$("#dialogCarregando").dialog("open");
				},
				success : function(html) {
					$("#dialogCadastrarCliente").html(html);
					$("#dialogCadastrarCliente").dialog("open");
					document.documentElement.style.cursor = 'default';
					$("#dialogCarregando").dialog("close");
				},
				error:function(){
					$("#dialogCadastrarCliente").html("");
					$("#dialogCadastrarCliente").dialog("close");
					document.documentElement.style.cursor = 'default';
					$("#dialogCarregando").dialog("close");
				}
			});
		});
		
		$("#dialogCadastrarCliente").dialog({
			resizable : false,
			autoOpen : false,
			draggable : false,
			height : 'auto',
			width : 'auto',
			modal : true,
			close : function() {
				$(this).html("");
			}
		});
		//os botões do dialog de cadastro de cliente esta dentro do form da pagina cadastrarCliente.jsp
		
		$("#dialogAlterarCliente").dialog({
			resizable : false,
			autoOpen : false,
			height : 'auto',
			width : 'auto',
			modal : true,
			close : function() {
				$(this).html("");
			}
		});
		//os botões do dialog de Alterar cliente esta dentro do form da pagina alterarCliente.jsp
		
		$("#dialogExcluirCliente").dialog({
			resizable : false,
			draggable : false,
			autoOpen : false,
			height : 134,
			width : 'auto',
			modal : true,
			buttons : {
				"Sim" : function() {
					var id = $("#idExcluirCliente").val();
					$.ajax({
						url:"removeClienteServlet",
						data:{id: id},
						beforeSend : function() {
							window.document.documentElement.style.cursor = 'progress';
							$("#msnExcluirCliente").html("Excluindo...");
						},
						success : function(html) {
							$("#msnExcluirCliente").html("Excluido.");
							$("#divTabelaClientes").load("ajax/atualizaTabelaCliente.jsp");
							window.document.documentElement.style.cursor = 'default';
							$("#dialogExcluirCliente").dialog("close");
						},
						error:function(){
							window.document.documentElement.style.cursor = 'default';
						}
					});
					
				},
				Não : function() {
					$(this).dialog("close");
				}

			},
			close : function() {
				$("#idExcluirCliente").val("");
				$("#msnExcluirCliente").html("");
			}
		});
		
	});
	
	function alterarCliente(id){
		$.ajax({
			url:"alterarCliente.jsp",
			data:{id: id},
			beforeSend : function() {
				document.documentElement.style.cursor = 'progress';
				$("#dialogCarregando").dialog("open");
			},
			success : function(html) {
				$("#dialogAlterarCliente").html(html);
				$("#dialogAlterarCliente").dialog("open");
				document.documentElement.style.cursor = 'default';
				$("#dialogCarregando").dialog("close");
			},
			error:function(){
				$("#dialogAlterarCliente").html("");
				$("#dialogAlterarCliente").dialog("close");
				document.documentElement.style.cursor = 'default';
				$("#dialogCarregando").dialog("close");
			}
		});
	};
	
	function excluirCliente(id, nome){
		$("#msnExcluirCliente").html("<span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Realmente deseja excluir o cliente '"+nome+"' ?");
		$("#idExcluirCliente").val(id);
		$("#dialogExcluirCliente").dialog("open");
		
	};	
</script>
</head>
<body>
	<fieldset class="ui-corner-all"
		style="margin-top: 10px; margin-bottom: -10px; padding-left: 0px; padding-right: 0px;">
		<legend class="ui-corner-all" style="font-size: 14px; margin-left: 8px;">Registros de Clientes</legend>
	<p>
				<button id="btnNovoCliente" style="margin-left: 8px;">Novo Cliente</button>
			</p>
			<div id="divTabelaClientes">
			<div style="font-weight: bold;">Carregando dados...</div> 
		</div>
		</fieldset>
	<!-- dialogs -->
	<div id="dialogCadastrarCliente" title="Cadastrar Cliente"></div>
	<div id="dialogAlterarCliente" title="Alterar Cliente"></div>
	<div id="dialogExcluirCliente" title="Excluir Cliente">
	<p id="msnExcluirCliente"></p>
	<input type="hidden" id="idExcluirCliente">
	</div>
</body>
</html>